import {View} from 'react-native';
import {Text, useAppTheme} from 'tsun-smart-ui';
import DeviceState from '../DeviceInfo/DeviceState';
import DeviceAlarm from '../DeviceInfo/DeviceAlarm';
import {useDeviceInfo} from '../DeviceInfo/DeviceInfoContext';
import InfoCard from '../DeviceInfo/DeviceInfoCard';
import {CardTitle} from './Inverter';
import {navigationRef} from '@/navigation';
import {useTranslation} from 'react-i18next';
import DeviceNetwork from '../DeviceInfo/DeviceNetwork';
import {template} from '@beqa/react-slots';
import Logo from '../Logo';

const DCU = () => {
  const theme = useAppTheme();
  const deviceData = useDeviceInfo();
  const {t} = useTranslation();
  const {
    pvPower: {powerTotal, ...pvPowers},
    sn,
    out,
    state,
    powerGen,
  } = useDeviceInfo();
  const sections: {
    key: string;
    render: React.ReactNode;
  }[] = [
    {
      key: 'pvPower',
      render: (
        <InfoCard
          title={
            <CardTitle
              title={t('device.pv_power', {defaultValue: '光伏功率'})}
              icon={<Logo name="currentTime" backgroundColor={theme.colors?.brand?.primaryLight!} color={theme.colors?.brand?.primary!} size={24} />}
              onPress={() => {
                navigationRef.navigate('PVChart', {
                  id: sn,
                  pvNum: 0,
                });
              }}
              power={powerTotal}
            />
          }
          items={Object.entries(pvPowers)
            .map(([key, value]) => ({
              label: key.replace('power', '').toUpperCase(),
              value: value,
              unit: 'W',
            }))
            .slice(0, state.pvNums)}
        />
      ),
    },
    {
      key: 'outputPower',
      render: (
        <InfoCard
          title={
            <CardTitle
              title={t('device.output_power', {defaultValue: '输出功率'})}
              power={out.powerTotal}
              onPress={() => {
                navigationRef.navigate('EquipTimeChart', {
                  id: sn,
                });
              }}
              icon={<Logo name="Output" backgroundColor={theme.colors?.info?.light!} color={theme.colors?.info?.primary!} size={24} />}
            />
          }
          items={[
            {label: t('syslog.voltage'), value: out.voltage, unit: 'V'},
            {label: t('syslog.current'), value: out.current, unit: 'A'},
          ]}
        />
      ),
    },
    {
      key: 'battery',
      render: (
        <InfoCard
          title={
            <CardTitle
              title={t('common.battery')}
              icon={<Logo name="battery" backgroundColor={theme.colors?.brand?.primaryLight!} color={theme.colors?.brand?.primary!} size={24} />}
            />
          }
          items={[
            {
              label: t('common.capacity', {defaultValue: '额定容量'}),
              value: powerGen.genDay,
              unit: 'Ah',
            },
            {
              label: t('common.capacity', {defaultValue: '累计能量'}),
              value: powerGen.genTotal,
              unit: 'kWh',
            },
          ]}
        />
      ),
    },
  ];
  return (
    <View>
      <DeviceState>
        <template.soc>
          {value => (
            <Text style={{color: theme.colors?.neutral?.primary}}>
              SOC: <Text>{value.soc}</Text>
            </Text>
          )}
        </template.soc>
      </DeviceState>
      <DeviceNetwork></DeviceNetwork>
      {sections.map(section => (
        <View className="mb-3" key={section.key}>
          {section.render}
        </View>
      ))}
      <DeviceAlarm></DeviceAlarm>
    </View>
  );
};

export default DCU;
